<template>
    <div>
        <el-steps :active="2" align-center>
            <el-step title="选择影片场次"></el-step>
            <el-step title="选择座位"></el-step>
            <el-step title="15分钟内付款"></el-step>
            <el-step title="影院取票观影"></el-step>
        </el-steps>
        <div class="whole">
            <div class="left">
                <div class="seat-example">
                    <span class="seat" :class="isSelected[0]"></span>
                    <span style="margin: 0 20px">可选座位</span>
                    <span class="seat" :class="isSelected[3]"></span>
                    <span style="margin: 0 20px">已售座位</span>
                    <span class="seat" :class="isSelected[2]"></span>
                    <span style="margin: 0 20px">已选座位</span>
                </div>

                <div class="screen">银幕中央</div>

                <div class="seat-content">
                    <div class="row" v-for="(value, key) in seats">
                        <span style="width: 10px; margin-right: 50px">{{
                            key
                        }}</span>
                        <div style="display: flex; justify-content: flex-end">
                            <span
                                class="seat"
                                :class="isSelected[seats[key][index]]"
                                @click="pressSeat(key, index)"
                                v-for="(item, index) in value"
                            ></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="right-content">
                    <div class="right-header">
                        <div class="poster">
                            <img :src="session.sysMovie.moviePoster" alt="" />
                        </div>
                        <div class="movie-info">
                            <p style="font-size: 20px; font-weight: 700">
                                {{ session.sysMovie.movieName }}
                            </p>
                            <span
                                >类型：{{
                                    session.sysMovie.movieCategoryList.join("/")
                                }}</span
                            >
                            <span
                                >时长：{{
                                    session.sysMovie.movieLength
                                }}分钟</span
                            >
                        </div>
                    </div>
                    <div class="right-content">
                        <div class="info-item">
                            <span>影院：</span>
                            <span>{{
                                session.sysHall.sysCinema.cinemaName
                            }}</span>
                        </div>
                        <div class="info-item">
                            <span>影厅：</span>
                            <span>{{ session.sysHall.hallName }}</span>
                        </div>
                        <div class="info-item">
                            <span>版本：</span>
                            <span>{{ session.languageVersion }}</span>
                        </div>
                        <div class="info-item">
                            <span>场次：</span>
                            <span
                                >{{ session.sessionDate }}
                                {{ session.playTime }}</span
                            >
                        </div>
                        <div class="info-item">
                            <span>票价：</span>
                            <span>￥{{ session.sessionPrice }}/张</span>
                        </div>
                        <span style="color: #999">座位：</span>
                        <div class="seat-chose">
                            <span
                                class="ticket"
                                v-if="pickedSeats.length > 0"
                                v-for="item in pickedSeats"
                                >{{ item }}</span
                            >
                        </div>
                        <div class="info-item" style="align-items: center">
                            <span style="color: #333">总价：</span>
                            <span style="font-size: 20px; color: #f03d37"
                                >￥{{
                                    session.sessionPrice * pickedSeats.length
                                }}</span
                            >
                        </div>
                        <div style="text-align: center; margin-top: 30px">
                            <el-button
                                type="danger"
                                round
                                @click="submitBill"
                                style="font-size: 22px"
                            >
                                <i
                                    style="font-size: 22px"
                                    class="iconfont icon-r-yes"
                                ></i>
                                提交订单</el-button
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
import { Message } from "element-ui";
export default {
    name: "ChooseSeat",
    data() {
        return {
            isSelected: {
                0: "seat-default",
                1: "seat-no",
                2: "seat-pick",
                3: "seat-sold",
            },
            seats: {},
            sessionId: this.$route.params.sessionId,
            session: {
                sysMovie: {
                    movieCategoryList: [],
                },
                sysCinema: {},
                sysHall: {},
            },
            pickedSeats: [],
            addForm: {
                userId: 0,
                sessionId: 0,
                seats: "",
            },
        };
    },
    created() {
        this.getSession();
    },
    methods: {
        async getSession() {
            const { data: resp } = await axios.get(
                "sysSession/find/" + this.sessionId
            );
            if (resp.code !== 200) return this.$message.error(resp.msg);
            this.session = resp.data;
            this.session.sysMovie.moviePoster =
                this.global.base +
                JSON.parse(this.session.sysMovie.moviePoster)[0];
            this.seats = JSON.parse(resp.data.sessionSeats);
            this.session.sysMovie.movieCategoryList =
                this.session.sysMovie.movieCategoryList.map((obj, index) => {
                    return obj.movieCategoryName;
                });
            console.log("加载页面时的座位状态");
            console.log(this.seats);
        },
        pressSeat(key, idx) {
            let seat_str = key + "排" + (idx + 1) + "座";
            // 选座
            if (this.seats[key][idx] === 0) {
                // 判断选座是否超过5个，超过5个则不能选
                if (this.pickedSeats.length === 5) {
                    this.$alert("您最多选择五个座位", "提示", {
                        confirmButtonText: "确定",
                        type: "warning",
                    }).catch((err) => err);
                    return;
                }
                this.$set(this.seats[key], idx, 2);
                this.pickedSeats.push(seat_str);
            } else if (this.seats[key][idx] === 2) {
                // 取消选座
                this.$set(this.seats[key], idx, 0);
                this.pickedSeats.splice(this.pickedSeats.indexOf(seat_str), 1);
            }
            console.log(this.pickedSeats);
        },
        async submitBill() {
            // 获取token，校验登录
            const token = window.sessionStorage.getItem("token");
            if (!token) {
                window.sessionStorage.setItem(
                    "sessionId",
                    this.session.sessionId
                );
                this.$alert("抱歉！提交订单前，请先登录", "提交订单异常通知", {
                    confirmButtonText: "我知道了",
                    callback: (action) => {
                        this.$router.push("/login");
                    },
                });
                return;
            }
            // 校验是否选座，未选座则警告
            if (this.pickedSeats.length === 0) {
                this.$alert(
                    "抱歉！您暂时未选座，无法提交订单，请选座后提交订单。",
                    "提交订单异常通知",
                    {
                        confirmButtonText: "我知道了",
                        callback: (action) => {
                            this.$router.push("/chooseSeat/" + this.sessionId);
                        },
                    }
                );
                return;
            }
            //获取场次座位信息
            const { data: curSession } = await axios.get(
                "sysSession/find/" + this.sessionId
            );
            let sessionSeats = JSON.parse(curSession.data.sessionSeats);
            //解析出订单选择的座位，更新座位信息
            for (let seat of this.pickedSeats) {
                let row = seat.substring(0, seat.indexOf("排"));
                let col = Number.parseInt(
                    seat.substring(seat.indexOf("排") + 1, seat.length - 1)
                );
                if (sessionSeats[row][col - 1] === 3) {
                    // 更新座位信息
                    this.seats = JSON.parse(curSession.data.sessionSeats);
                    this.$alert(
                        "抱歉！您所选的座位" + seat + "已被占用，请重新选择。",
                        "选座异常通知",
                        {
                            confirmButtonText: "我知道了",
                            callback: (action) => {
                                this.$router.push(
                                    "/chooseSeat/" + this.sessionId
                                );
                            },
                        }
                    );
                    return;
                } else {
                    sessionSeats[row][col - 1] = 3;
                }
            }
            console.log("提交订单后的座位状态");
            console.log(sessionSeats);

            this.addForm.userId = JSON.parse(
                window.sessionStorage.getItem("loginUser")
            ).userId;
            this.addForm.sessionId = this.sessionId;
            this.addForm.seats = JSON.stringify(this.pickedSeats);
            axios.defaults.headers.post["Content-Type"] = "application/json";
            const { data: res } = await axios.post(
                "sysBill",
                JSON.stringify({
                    sysBill: this.addForm,
                    sessionSeats: JSON.stringify(sessionSeats),
                })
            );
            // const { data: res} = await axios.post('sysBill', JSON.stringify(this.addForm));
            if (res.code !== 200) return this.$message.error("添加订单失败！");
            await this.$router.push("/billDetail/" + res.data.billId);
        },
    },
};
</script>

<style scoped>
.el-step {
    margin: 40px auto;
}

.whole {
    width: 1200px;
    margin: 0 auto;
    border: 1px solid #e5e5e5;
    display: flex;
}

.left {
    width: 820px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e5e5e5;
}

.right {
    width: 340px;
    background-color: #f9f9f9;
    padding: 20px;
}

.seat {
    display: inline-block;
    width: 30px;
    height: 26px;
    margin: 0 5px;
    background-position: 0 1px;
}

.seat-default {
    background: url("../../assets/sofa-unpick.png") no-repeat;
    background-size: cover;
}

.seat-empty {
    background: url("../../assets/sofa-empty.png") no-repeat;
    background-size: cover;
}

.seat-sold {
    background: url("../../assets/sofa-forbidden.png") no-repeat;
    background-size: cover;
}

.seat-pick {
    background: url("../../assets/sofa-pick.png") no-repeat;
    background-size: cover;
}

.seat-example {
    display: flex;
    align-items: center;
    margin: 20px 0 0 0;
}

.screen {
    width: 550px;
    padding-top: 50px;
    text-align: center;
    font-size: 16px;
    color: #666;
    background: url()
        no-repeat;
    background-position-x: center;
    position: relative;
    margin: 40px 0 40px 0;
}

.row {
    white-space: nowrap;
    margin-top: 10px;
    padding: 0 10px;
    text-align: center;
    display: flex;
}

.seat-content {
    margin-bottom: 40px;
    overflow-x: scroll;
    width: 90%;
    padding: 10px;
}

.poster {
    width: 115px;
    height: 158px;
}

.poster > img {
    width: 100%;
    height: 100%;
}

.right-header {
    display: flex;
}

.movie-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
}

.info-item {
    display: flex;
    margin: 15px 0;
    font-size: 14px;
}

.info-item :first-child {
    color: #999999;
}

.seat-chose {
    margin-top: 20px;
    margin-left: 42px;
    margin-bottom: 20px;
    position: relative;
    top: -5px;
}

.ticket {
    cursor: default;
    position: relative;
    font-size: 13px;
    color: #f03d37;
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 0 12px 10px 0;
    background: url()
        no-repeat;
}
</style>
